<script setup lang='ts'>
  import { onActivated, reactive } from 'vue';
  import { accountApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getDateArray, getPlayEndTime } from '@/utils';
  import Pagination from "@/components/Pagination/index.vue";
  import { useRoute } from 'vue-router'
  const $route = useRoute()
  interface listQueryForm {
    page:number
    limit:number
    uuid:string | number
    nickname:string
    type:number
    end_date:number
    begin_date:number
  }
  let listQuery = reactive({
    page: 1,
    limit: 10,
    type:-1
  }) as listQueryForm
  const action = reactive({
    list: [],
    total: 0,
    dateArr:getDateArray('canon') as Array<number>
  })
  const statusOptions = [
    { label: '全部', value: -1 },
    { label: '礼物', value: 0 },
    { label: '守护', value: 1 },
    { label: '商品', value: 2 },
    { label: '守护', value: 3 },
    { label: '提现', value: 4 },
    { label: '驳回', value: 5 },
    { label: '其它', value: -2 }
  ]
  const kkTypeFilter = (type:number)=>{
    const arr = [
      {type:0,text:'礼物'},
      {type:1,text:'守护'},
      {type:2,text:'商品'},
      {type:3,text:'守护'},
      {type:4,text:'提现'},
      {type:5,text:'驳回'},
      {type:-2,text:'其它'},
    ]
    const obj = arr.find(res=>res.type == type) || {text:type}
    return obj.text
  }
  const getList = async()=>{
    const loading = Toastloading()
    const timeObi = getPlayEndTime(action.dateArr)
    const res = await accountApi.getCharmRecords({
      ...listQuery,
      begin_date:timeObi.playTime,
      end_date:timeObi.endTime
    })
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
    loading.close()
  }
  const handleFilter = ()=>{
    listQuery.page = 1
    getList()
  }
  const resetQuery = ()=>{
    Object.assign(listQuery,{
      page:1,
      limit:20,
      type:-1,
      uuid:'',
      nickname:'',
    })
    action.dateArr = getDateArray('canon') as Array<number>
    getList()
  }
  onActivated(()=>{
    const uuid = $route.query.uuid as string
    if(!uuid) return
    listQuery.uuid = uuid
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab labelBox">
      <div class="labelItem">
        <div class="label">用户UUID：</div>
        <el-input v-model="listQuery.uuid" placeholder="请输入用户UUID" style="width: 160px" />
      </div>
      <div class="labelItem">
        <div class="label">昵称：</div>
        <el-input v-model="listQuery.nickname" placeholder="请输入昵称" style="width: 160px" />
      </div>
      <div class="labelItem">
        <div class="label">流水类型：</div>
        <el-select v-model="listQuery.type" placeholder="流水类型" style="width: 100px">
          <el-option
          v-for="item of statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
        </el-select>
      </div>
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="action.dateArr"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </div>
      </div>
    </div>
    
    <el-table class="xm-main" :data="action.list" border>
      <el-table-column min-width="180" prop="change_time" align="center" label="创建时间" />
      <el-table-column min-width="100" prop="number.user_id" align="center" label="ID" />
      <el-table-column min-width="100" prop="number.uuid" align="center" label="UUID" />
      <el-table-column :show-overflow-tooltip="true" min-width="150" prop="number.nickname" align="center" label="昵称" />
      <el-table-column min-width="100" prop="charm_type" align="center" label="类型">
        <template #default="scope">
          {{ kkTypeFilter(scope.row.charm_type) }}
        </template>
      </el-table-column>
      <el-table-column min-width="180" prop="charm_value" align="center" label="变动魅力值" />
      <el-table-column min-width="180" prop="charm_balance" align="center" label="魅力值" />
      <el-table-column min-width="100" prop="sender.user_id" align="center" label="接收用户ID" />
      <el-table-column :show-overflow-tooltip="true" min-width="180" prop="sender.nickname" align="center" label="来源用户" />
      <el-table-column :show-overflow-tooltip="true" min-width="180" prop="room.name" align="center" label="来源房间" />
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>

<style lang='scss' scoped>
  
</style>